<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:replace="common/common_css :: css(~{::link})">
    </head>
    <title>挂号收费</title>
    <link rel="stylesheet" type="text/css" th:href="@{/css/chosen.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/mcss/mcss_register.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{css/mcss/model/component-1.css}"/>

    <link type="text/css" rel="stylesheet" th:href="@{/css/preloader.css}">
</head>
<body>

<div id="preloader">
    <div id="preloader-inner"></div>
</div>

<div id="wrapper">
    <div th:replace="common/common_left :: left"></div>

    <div id="content-wrapper" class="d-flex flex-column content-wrapper">
        <div id="content">
            <div th:replace="common/common_head :: head"></div>

            <!--正文-->
            <div>
                <div class="card shadow mb-4" style="margin-left: 2.5%;height: 818px">

                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">挂号收费</h6>
                    </div>

                    <div class="card-body">

                        <div style=" margin-left: 8%;margin-right: 1%;margin-top: 1%">

                            <div>

                                <div class="textbox">
                                    卡号<input type="text" id="cardId" onchange="clearCardInfo()">
                                    <div class="cardId-search">
                                        <button class="btn btn-success" onclick="getCardIdInfor(1)">
                                            <img class="png" th:src="@{/images/icon/search.png}">
                                        </button>
                                    </div>
                                    <!--                                    <div class="mybtn1">-->
                                    <!--                                        <button class="btn btn-info" onclick="getCardIdInfor(0)">读取就诊卡</button>-->
                                    <!--                                    </div>-->
                                    <div class="mybtn">
                                        <a href="#mymodal_1">
                                            <button class="btn btn-info">新办就诊卡</button>
                                        </a>

                                    </div>
                                </div>


                                <div class="textbox_2">

                                    姓名<input type="text" id="name" style="width: 120px" readonly="readonly">&emsp;
                                    性别<input type="text" id="sex" style="width: 90px" readonly="readonly">&emsp;
                                    民族<input type="text" id="nationality" style="width: 90px" readonly="readonly">&emsp;
                                    年龄<input type="text" id="age" style="width:100px" readonly="readonly">

                                </div>


                                <div class="textbox_3">
                                    <div>
                                        选择科室
                                        <select class='chosen select' id="departmentSelect" data-placeholder=' '>
                                            <option value=""></option>
                                        </select>
                                    </div>

                                    <div style="margin-left: 50px">
                                        挂号类型<input id="departmentTypeSelect" readonly="readonly">
                                    </div>

                                    <div class="cardId-search">
                                        <button class="btn btn-info" onclick="getRegisterDoctor()">
                                            <img class="png" th:src="@{/images/icon/search.png}">
                                        </button>
                                    </div>
                                </div>

                                <div class="register_table">
                                    <table id="RegisterDoctor"></table>
                                </div>

                                <div class="textbox_2">

                                    挂号费<input type="text" id="registerPriice" style="width: 120px" value="1.0"
                                              readonly="readonly">元&emsp;

                                    诊查费<input type="text" id="treatmentPrice" style="width: 120px;color: red"
                                              readonly="readonly">元&emsp;

                                    付款方式<select class='payType' data-placeholder=' ' id="toPayController">
                                     
                                    <option value=""></option>

                                    <option value="现金">现金</option>
                                       
                                    <option value="支付宝">支付宝</option>
                                     
                                </select>
                                </div>
                                <div class="textbox_2" style="display: flex">
                                    <div style="width: 36%">
                                        <div id="money" style="display: none">
                                            实付<input type="text" id="payMoney" style="width: 120px"
                                                     oninput="getChange()">元&emsp;&emsp;&emsp;
                                            找零<input type="text" id="Change" style="width: 100px;color: red"
                                                     readonly="readonly">元

                                        </div>

                                        <div id="apay" style="display: none;margin-left: 55%">
                                            <img style="width: 100px;height: 100px;"
                                                 th:src="@{/images/icon/apay.jpg}">
                                        </div>
                                    </div>
                                    <div class="mybtn3">

                                        <button class="btn btn-info" onclick="addRegisterInfor()">提交信息</button>

                                    </div>

                                </div>

                            </div>
                        </div>

                    </div>
                    <!--模态框_-->
                    <div id="mymodal_1" class="mymodal_overlay">
                        <div class="mymodal_modal modal1">
                            <div style="font-size: 1.1rem">
                                <img class="png" th:src="@{/images/icon/change.png}">&emsp;办理就诊卡
                                <div style="color: crimson;display: inline">(若要手动录入，请输入规则的信息，否则后面的流程会出现问题)</div>
                                <!--                                <div style="color: crimson;display: inline">(若要手动录入，请输入规则的信息，否则后面的流程会出现问题)</div>-->
                            </div>

                            <div class="textbox_1">

                                姓名<input type="text" id="IDname" style="width: 120px">&emsp;&emsp;&emsp;&emsp;&emsp;
                                身份证号<input type="text" id="IDcard" style="width: 320px">
                                <br>
                                <br>
                                性别<input type="text" id="IDsex" style="width: 90px">&emsp;&emsp;
                                民族<input type="text" id="IDnationality" style="width: 90px">&emsp;&emsp;
                                出生日期<input type="text" id="IDbirthday" placeholder="格式：1996-01-02" style="width:220px">
                                <br>
                                <br>
                                <div style="display: flex">
                                    <div style="margin-right: 100px">
                                        住址<input type="text" id="IDaddress" style="width: 330px">&emsp;&emsp;&emsp;
                                    </div>
                                    <!--                                    <div>-->
                                    <!--                                        <button class="btn btn-outline-primary" onclick="getIDcardInfor()">-->
                                    <!--                                            二代身份证阅读-->
                                    <!--                                        </button>-->
                                    <!--                                    </div>-->
                                </div>
                                <div style="display: flex" class="cardid">
                                    <div style="margin-right: 230px">
                                        卡号<input type="text" id="cardId_1" style="width: 220px">&emsp;&emsp;&emsp;
                                    </div>
                                    <!--                                    <div>-->
                                    <!--                                        <button class="btn btn-outline-primary" onclick="getDefaultGetCardId()">-->
                                    <!--                                            读取新就诊卡-->
                                    <!--                                        </button>-->
                                    <!--                                    </div>-->
                                </div>
                                <div style="margin-bottom: 22px">
                                    手机<input type="text" id="IDtelphone" style="width:220px">(非必填)
                                </div>
                            </div>
                            <div class=" modal-footer
                                    ">
                                <a style="text-decoration: none" href="#">
                                    <button type="button" class="btn btn-primary"
                                            onclick="cancel()">取消
                                    </button>
                                </a>
                                <button type="button" class="btn btn-primary"
                                        onclick="addPatientInfor()">确认
                                </button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</div>
</div>
</div>
<div>
    <div th:replace="common/common_js :: js(~{::script})"></div>
    <script type="text/javascript" th:src="@{/js/jquery.preloader.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/chosen.jquery.min.js}"></script>
    <script th:src="@{/sb-admin-2/bootstrap/bootstrap-table.min.js}"></script>
    <script th:src="@{/sb-admin-2/bootstrap/bootstrap-table-zh-CN.js}"></script>
    <script type="text/javascript" th:src="@{/js/mjs/mjs_register.js}"></script>
</div>
</body>
<script>
    var department = 0;
    var registerType = 0;

    var departmentName = "";

    $(function () {

        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

        $.ajax({
            url: "/admin/getDepartment",
            type: "post",
            dataType: "json",
            success: function (data) {
                var optionHtml = '<option value=""></option>';
                $.each(data, function (i, value) {
                    optionHtml += '<option value="' + value.code + '" id="' + value.type + '">' + value.name + '</option>';
                });

                $('#departmentSelect').html(optionHtml).trigger("chosen:updated").chosen({
                    no_results_text: "没有找到结果！",
                    search_contains: true,
                    allow_single_deselect: true,
                    disable_search: false,
                    disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。
                    inherit_select_classes: true, //是否继承原下拉框的样式类，此处设为继承
                    /*placeholder_text_single: '',*/ //单选选择框的默认提示信息，当选项为空时会显示。如果原下拉框设置了data-placeholder，会覆盖这里的值。

                    max_shown_results: 100, //下拉框最大显示选项数量
                    display_disabled_options: false,
                    single_backstroke_delete: false, //false表示按两次删除键才能删除选项，true表示按一次删除键即可删除
                    case_sensitive_search: false, //搜索大小写敏感。此处设为不敏感
                    group_search: false, //选项组是否可搜。此处搜索不可搜
                    include_group_label_in_selected: true //选中选项是否显示选项分组。false不显示，true显示。默认false。
                }).change(function () {
                    //选择科室
                    department = $("#departmentSelect option:selected").val();
                    departmentName = $("#departmentSelect option:selected").text();

                    //科室类型
                    registerType = $("#departmentSelect option:selected").attr("id");

                    if ("0" === registerType) {
                        $("#departmentTypeSelect").val("普通门诊");
                    }
                    if ("1" === registerType) {
                        $("#departmentTypeSelect").val("急诊");
                    }
                });
            }
        })
    });


    function getCardIdInfor(command) {

        var GetCardIdInforReqVO = {
            command: command, //0:表示读卡器输入卡号 1:表示手动输入卡号
            cardId: $("#cardId").val()
        };
        $.ajax({
            url: "/register/getCardIdInfor",
            type: "post",
            contentType: 'application/json',
            data: JSON.stringify(GetCardIdInforReqVO),
            success: function (data) {
                if (data.state == 200) {
                    var cardId=$("#cardId");
                    var name=$("#name");
                    var sex=$("#sex");
                    var nationality=$("#nationality");
                    var age=$("#age");

                    cardId.val(data.data.cardId);
                    name.val(data.data.name);
                    sex.val(data.data.sex);
                    nationality.val(data.data.nationality);
                    age.val(data.data.age)

                    swal(data.data.message, "", "success")
                } else {
                    swal(data.data.message, "", "error");
                }
            }
        })
    }


    function getRegisterDoctor() {

        var name = $("#name").val();
        //患者姓名作为限制
        if (name == null || name === '') {
            swal("请先读取就诊卡！", "", "error");
            return false;
        }

        if (department == null || department === '') {
            swal("请选择科室！", "", "error");
            return false;
        }


        $('#RegisterDoctor').bootstrapTable("destroy");
        //1.初始化Table
        var oTable = new TableInit();
        oTable.Init();

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    }

    var doctor = '';
    var doctorId = '';
    var treatmentPrice = '';
    var doctorName = '';
    var workAddress = '';

    var TableInit = function () {
        var oTableInit = {};
        //初始化Table
        oTableInit.Init = function () {
            $('#RegisterDoctor').bootstrapTable({
                url: '/register/getAllRegisterDoctor',         //请求后台的URL（*）
                method: 'get',                      //请求方式（*）
                toolbar: '#toolbar',                //工具按钮用哪个容器
                striped: false,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                // sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
                /*   pageNumber: 1,                       //初始化加载第一页，默认第一页
                   pageSize: 5,                       //每页的记录行数（*）
                   queryParamsType: "",
                   paginationPreText: "上一页",
                   paginationNextText: "下一页",*/
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: true,
                showColumns: false,                  //是否显示所有的列
                showRefresh: false,                  //是否显示刷新按钮
                minimumCountColumns: 0,             //最少允许的列数
                clickToSelect: false,                //是否启用点击选中行
                height: 300,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "loginIp",                     //每一行的唯一标识，一般为主键列
                showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
                columns: [{
                    field: 'no',
                    title: '序号',
                    sortable: true,
                    align: "center",
                    width: 40,
                    formatter: function (value, row, index) {

                        return index + 1
                    }
                }, {
                    field: 'doctorName',
                    title: '医生名称',
                    align: 'center',
                    valign: 'middle'
                }, {

                    field: 'workDateTime',
                    title: '门诊时间',
                    align: 'center',
                    valign: 'middle'

                }, {
                    field: 'price',
                    title: '诊查费',
                    align: 'center',
                    valign: 'middle'

                }, {
                    field: 'allowNum',
                    title: '限额数',
                    align: 'center',
                    valign: 'middle'

                }, {
                    field: 'nowNum',
                    title: '已挂号数',
                    align: 'center',
                    valign: 'middle',
                    Color: 'red'
                }, {
                    field: 'operation',
                    title: '操作',
                    align: 'center',
                    width: '25%',
                    events: operateEvents,//给按钮注册事件
                    formatter: addFunctionAlty//表格中增加按钮
                }]
            });
        };

        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的

                    department: department,
                    registerType: registerType
                }
            ;
            return temp;
        };
        return oTableInit;
    };


    var ButtonInit = function () {
        var oInit = {};
        var postdata = {};

        oInit.Init = function () {
            //初始化页面上面的按钮事件
        };

        return oInit;
    };

    function clearCardInfo() {
        $("#name").val("");
        $("#sex").val("");
        $("#nationality").val("");
        $("#age").val("");
    }


    function cancel() {

        $("#IDname").val("");
        $("#IDcard").val("");
        $("#IDsex").val("");
        $("#IDnationality").val("");
        $("#IDbirthday").val("");
        $("#IDaddress").val("");
        $("#cardId_1").val("");
        $("#IDtelphone").val("")
    }


    function addRegisterInfor() {

        var payMoney = $("#payMoney").val();
        //判断是否为数字
        var reg = /^[0-9]+\.?[0-9]*$/;
        if (!reg.test(payMoney)) {
            swal("填写有误","","error");
            return;
        }
        if(payMoney==""){
            swal("请填写实付金额","","error");
            return;
        }

        cardId = $("#cardId").val();

        var registerTypeName = $("#departmentTypeSelect").val();

        var RegisterInforReqVO = {
            cardId: cardId,
            doctorId: doctorId,
            department: department,
            registerType: registerTypeName,
            doctor: doctorName,
            treatmentPrice: treatmentPrice,
            payType: payType
        };
        if (cardId == null || cardId === '') {
            swal("请先读取就诊卡！", "", "error");
            return false;
        }

        if (treatmentPrice == null || treatmentPrice === '') {
            swal("请选择挂号医生！！", "", "error");
            return false;
        }

        swal
        ({
                title: "请确认挂号信息",
                text: "卡号:<span style='color: #2C9FAF'>" + cardId + "</span>&emsp;科室:<span style='color: #2C9FAF'>" + departmentName + "</span>" +
                    "<br>类型:<span style='color: #2C9FAF'>" + registerTypeName + "</span>&emsp;医生:<span style='color: #2C9FAF'>" + doctorName + "</span>" +
                    "<br>地址:<span style='color: #2C9FAF'>" + workAddress + "</span>",
                type: "info",
                html: true,
                showCancelButton: true,
                closeOnConfirm: false,
                showLoaderOnConfirm: true
            },

            function () {

                $.ajax({
                    url: "/register/addRegisterInfor",
                    type: "post",
                    contentType: 'application/json',
                    data: JSON.stringify(RegisterInforReqVO),
                    success: function (data) {

                        if (data !== null && data.state === 200) {
                            setTimeout(function () {
                                swal({
                                        title: "提交成功！",
                                        type: "success"
                                    },
                                    function () {
                                        setTimeout(function () {
                                            window.location.reload()
                                        }, 500)

                                    });
                            }, 1500);

                        } else {
                            swal(data.message, "", "error")
                        }
                    }
                })

            })
    }


    //操作
    function addFunctionAlty(value, row, index) {
        if (row.allowNum === row.nowNum) {
            return [
                '<button class="btn btn-outline-primary" onclick="alertUnableReg()">选择</button>  '
            ].join('');
        } else {
            return [
                '<button id="btn_register" class="btn btn-outline-primary" >选择</button>  '
            ].join('');
        }

    }

    function alertUnableReg() {
        swal("当前医生可挂号数已达上限！", "", "error")
    }

    //现金支付改变
    $("#toPayController").change(function () {
        var toPayController = $("#toPayController").val();
        if(toPayController=="现金"){
            $("#payMoney").change(function () {
                var payMoney = parseInt($("#payMoney").val());
                var total = parseInt($("#registerPriice").val())+parseInt($("#treatmentPrice").val());
                $("#Change").val(payMoney-total);
                var Money = parseInt($("#Change").val());
                if(Money<0){
                    swal("实付金额不足","","error");
                    return;
                }
            })
        }

    });

    //验证付费信息(现金)
    function CheckToPayMoney() {
        var payMoney = $("#payMoney").val();
        //判断是否为数字
        var reg = /^[0-9]+\.?[0-9]*$/;
        if (!reg.test(payMoney)) {
            swal("填写有误","","error");
            return;
        }
        if(payMoney==""){
            swal("请填写实付金额","","error");
            return;
        }
        if($("#outpatient_queue_status").val()==1){
            swal("该诊单已付费","","error");
            return;
        }else if($("#outpatient_queue_status").val()==0){
            var prescriptionNum = $("#prescriptionNum").val();
            var param = {"prescriptionNum":prescriptionNum};
            $.post("/CheckToPay",param,function (data) {
                if(data.state==200){
                    alert(data.message);
                    MoneyToPay();
                }
                else {
                    swal(data.message,"","error");
                    return; }
            })
        }
        else{
            swal("未知错误","","error");
            return;
        }
    }








    function addPatientInfor() {
        if ($("#IDname").val() == null || $("#IDname").val() === '') {
            swal("姓名不能为空！", "", "error");
            return false;
        }
        if ($("#IDcard").val() == null || $("#IDcard").val()=== '') {
            swal("身份证号不能为空！", "", "error");
            return false;
        }
        if ($("#IDsex").val() == null || $("#IDsex").val() === '') {
            swal("性别不能为空！", "", "error");
            return false;
        }
        if ($("#IDaddress").val() == null || $("#IDaddress").val() === '') {
            swal("地址不能为空！", "", "error");
            return false;
        }
        if ($("#cardId_1").val() == null || $("#cardId_1").val() === '') {
            swal("就诊卡号不能为空！", "", "error");
            return false;
        }


        var PatientInforReqVO = {
            name: $("#IDname").val(),
            idCard: $("#IDcard").val(),
            sex: $("#IDsex").val(),
            nationality: $("#IDnationality").val(),
            birthday: $("#IDbirthday").val(),
            address: $("#IDaddress").val(),
            cardId: $("#cardId_1").val(),
            telphone: $("#IDtelphone").val()
        };
        $.ajax({
            url: "/register/addPatientInfor",
            type: "post",
            contentType: 'application/json',
            data: JSON.stringify(PatientInforReqVO),
            success: function (data) {

                if (data !== null && data.state === 200) {
                    swal("办理成功！", "", "success");
                    cancel();
                    window.location.hash = "#";
                }
                    // else if (data.message === "FAIL") {
                    //     swal("办理异常！请刷新页面重新操作", "", "error");
                    //     cancel()
                // }
                else if (data.message === "ACTIVATED") {
                    swal("该就诊卡已被激活！", "", "error");
                    $("#cardId_1").val()
                } else if (data.message === "COVER") {
                    swal({
                        title: "该患者已有就诊卡，点击“确认”进行补办操作！",
                        type: "info",
                        showCancelButton: true,
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true
                    }, function () {
                        $.ajax({
                            url: "/register/coverCardId",
                            type: "post",
                            contentType: 'application/json',
                            data: JSON.stringify(PatientInforReqVO),
                            success: function (data) {
                                // if (data !== null && data.state === 200) {
                                if (data.state == 200) {
                                    setTimeout(function () {
                                        swal(data.message, "", "success");
                                        cancel();
                                        // window.location.hash = "#";
                                    }, 1500);

                                }
                                else {
                                    setTimeout(function () {
                                        swal(data.message, "", "error");
                                    }, 1500);
                                }
                            }
                        })
                    });
                } else {
                    swal(data.message, "", "error")
                }
            }
        })
    }
</script>
</html>